<template>
  <div>
    <div>
      <van-row >
      <van-col span="8" style="line-height: 50px;"><van-icon name="manager-o" /></van-col>
      <!--搜索框-->
      <van-col span="8"><van-search v-model="value" placeholder="搜索" /></van-col>
      <van-col span="8" style="line-height: 50px;">搜索</van-col>
    </van-row>

    </div>


    <!--轮播图-->
    <van-swipe :autoplay="2000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" width="100%" height="250" />
      </van-swipe-item>
    </van-swipe>

    <!--通知栏-->
    <van-notice-bar
      left-icon="volume-o"
      scrollable
      text="关于2022年深化纠正'四风'和作风纪律专项活动。"
    />



    <van-tabbar v-model="active" @change="onChange" route>
      <van-tabbar-item icon="home-o" name="基层党建" replace to="/a1">基层党建</van-tabbar-item>

      <van-tabbar-item icon="search" name="教育培训" replace to="/education">教育培训 </van-tabbar-item>

      <van-tabbar-item icon="friends-o" name="首页" replace to="/index">首页</van-tabbar-item>

        <van-tabbar-item icon="setting-o" name="意识形态" replace to="/a4">意识形态</van-tabbar-item>

      <van-tabbar-item icon="search" name="群团天地" replace to="/a5">群团天地</van-tabbar-item>

    </van-tabbar>
    <!---->
    <van-tabs @click="" animated>
      <van-tab title="新闻动态" >
            <van-list  v-model="loading" :finished="finished" finished-text="我是有底线的"  @load="onLoad">
              <div v-for="item in list" style="border:1px solid silver ; border-radius: 10px ;height: 100px; padding: 20px;" @click="findNewsByNewsId(item.newsId)">
                <div style="float: left;" v-if="item.newsImagepath!=''">
                  <img :src="item.newsImagepath" alt="" style="width:100px ; height:90px ;" >
                </div>
                <div>
                 <span style="line-height: 40px; font-family: 微软雅黑;">{{item.newsTetle}}</span>
                </div>
                <div style="">
                  <span style="font-size: 10px; position: absolute; right: 20px;">来源:{{item.user.userName}}</span>
                </div>
                <span style="font-size: 10px;">{{item.newsDate}}</span>
              </div>
            </van-list>

      </van-tab>
      <van-tab title="通知公告">内容 2</van-tab>
      <van-tab title="政策文件">内容3</van-tab>
      <van-tab title="影视资料">内容4</van-tab>
      <van-tab title="互动社区">内容5</van-tab>
      <van-tab title="学习榜">内容4</van-tab>
      <van-tab title="奖品兑换">
        <div v-for="good in goodsList" style="border:1px solid silver ; border-radius: 10px ;">
          <van-card  :num="good.goodStock"  :price="good.goodPrice+'积分'"  :desc="good.typeName.typeName"  :title="good.goodName" :thumb="good.goodCover"  @click="findGoodByGoodId(good.goodId)"  ></van-card>

        </div>
      </van-tab>
      <van-tab title="通讯录">
        <van-index-bar v-for="item in indexList" >
          <van-index-anchor  index="">{{item.departmentName}}</van-index-anchor>

<!--          <van-cell :key="item.id" :title="item.userinfo.userName" />-->
          <van-cell style="text-align: left" :title="item.userinfo.userName" :key="item.id" is-link value="" />
        </van-index-bar>

<!--        <mt-index-list>-->
<!--          <mt-index-section :index="item.departmentName" v-for="item in indexList">-->
<!--            <van-cell :title="item.userinfo.userName" is-link value="" />-->
<!--          </mt-index-section>-->
<!--        </mt-index-list>-->

      </van-tab>
    </van-tabs>





<!--    <van-button type="primary" @click="go">主要按钮</van-button>-->
<!--    <mavon-editor  @imgAdd="addImage" ref="md" />-->
  </div>
</template>

<script>
import { Notify } from 'vant';
import axios from 'axios'
export default {
  name: "index",

  data() {
    return {
      StudyGroup:{
        studyId:'',
        studyTitle:'',
        studyContext:'',
        studyDate:'',
        studyNum:'',
        goodNum:'',
        studyCollect:'',
        studyClassify:'',
        studyWrite:'',
        studyImage:'',
        user:{
          userName:'',
          userTruename:''
        }
      },
      active:'',
      value :"",
      images: [
        'http://rhs5roj8q.hb-bkt.clouddn.com/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE%202022-09-23%20163919.png',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
      //新闻列表
      list: [],
      loading: false,
      finished: false,

      //商品列表
      goodsList:[],
      //通讯录
      indexList: [],
      dataList:[
        {
          title:"A",
          list:[//可以为空数组
            {
              name:'',
              id:''//id字段可以没有
            },
          ]
        }
      ]
    };
  },
  methods:{
    //查询所有党建标题
    findAll:function (){
      this.$axios.post("http://localhost:7000/Dj/findAllDj").then(res=>{
          this.StudyGroup = res.data.data;
      })
    },
    //跳转界面
    go:function (url) {
      this.$router.replace("/articleadd")
    },
    //标题内容
    // onClick(name, title) {
    //   Toast(title);
    // },
    onChange(name) {
      Notify({ type: 'primary', message: name });
    },
    //搜索引擎
    onSearch:function () {
      this.$axios.post("",{}).then(res=>{

      })
    },

    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        this.$axios.post("http://localhost:7000/news/findAllNews").then(res => {
          this.list = res.data.data;
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          this.finished = true;
        });
      }, 1000);
    },

    findGoods(){
      this.$axios.post('http://localhost:7000/shop/selectAllGoods' ,{goodType:1}).then(res=>{
        this.goodsList=res.data.data;
      });
    },
    //查询所有的通讯里信息
    findAllDepartment(){
      this.$axios.post('http://localhost:7000/phone/findAllDepartment').then(res=>{
        this.indexList=res.data.data;
      })
    },
    findNewsByNewsId(newsId) {
      this.$router.push({ name: "newsInfo", params: { id: newsId } });
    },
    findGoodByGoodId(goodId) {
      this.$router.push({ name: "shopInfo", params: { id: goodId } });
    }
  },
  mounted() {
    this.findGoods();
    this.findAllDepartment();
  }


}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
